<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-button
      type="primary"
      class="add"
      @click="addDialog"
    >
      添加工作模式
    </el-button>
    <el-table
      style="margin-top:20px;margin-bottom:30px"
      :data="tableData"
    >
      <el-table-column
        prop="id"
        label="工作模式编号"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="工作模式"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="workPatternTypeDesc"
        label="类型"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="workDate"
        label="工作日期"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="workTime"
        label="工作时间"
        width="249"
      >
        <template slot-scope="scope">
          <span>{{
            (
              (scope.row.workEndMinute1 - scope.row.workStartMinute1) /
              60
            ).toFixed(2)
          }}小时</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >编辑</el-button>
          <span class="shu">|</span>
          <el-button
            type="text"
            size="small"
            style="color:red;"
            @click="del(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="width:600px;margin:0 auto -20px"
      class="pagination"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="prevNextClick(-1)"
      @next-click="prevNextClick(1)"
    >
    </el-pagination>

    <!-- 弹框 -->
    <el-dialog
      :title="type === 'add' ? '新增工作模式' : '编辑工作模式'"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
      class="add-form-dialog"
      :close-on-click-modal="false"
    >
      <el-tabs
        v-model="form.workPatternType"
        @tab-click="handleClickTab"
      >
        <el-tab-pane
          v-if="(form.workPatternType === '1' && type === 'edit') ||type === 'add'"
          label="礼拜制"
          name="1"
        />
        <el-tab-pane
          v-if="(form.workPatternType === '2' && type === 'edit') ||type === 'add'"
          label="连续制"
          name="2"
        />
      </el-tabs>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item
          label="工作模式"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请填写工作模式名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.workPatternType==='1'"
          label="工作天数"
          prop="week"
        >
          <el-checkbox-group v-model="form.week">
            <el-checkbox
              v-for="(ele,i) in weekList"
              :key="i"
              :label="ele"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
          <div class="tips">选中为工作时间，未选中为休息时间</div>
        </el-form-item>
        <el-form-item
          v-else
          label="工作天数"
          prop="workDayNum"
        >
          上
          <el-input
            v-model="form.workDayNum"
            placeholder="请输入"
            style="width: 110px; margin-right: 21px; margin-left: 10px"
          >
            <span
              slot="suffix"
              style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 14px;
                      "
            >天</span></el-input>
          休
          <el-input
            v-model="form.restDayNum"
            placeholder="请输入"
            style="width: 110px; margin-left: 10px"
          >
            <span
              slot="suffix"
              style="
                        color: #20232a;
                        font-weight: 400;
                        font-size: 14px;
                        font-family: PingFangSC, PingFangSC-Regular;
                        margin-right: 14px;
                      "
            >天</span></el-input>
        </el-form-item>

        <el-form-item
          label="工作时间"
        >
          <el-time-picker
            v-model="form.dateRange"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            format="HH:mm"
            @change="handleDate"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item
          class="button"
          style="padding-bottom:20px"
        >
          <el-button
            type="primary"
            class="save-btn"
            style="margin-left:100px"
            @click="onSubmit"
          >确认</el-button>
          <el-button
            class="cancel-btn"
            @click="handleClose"
          >取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { workPatternsPageApi, workPatternsdelApi, workPatternsaddApi, workPatternseditApi } from '@/api/workarrange'
export default {

  data() {
    return {
      page: 1,
      pages: 0,
      pageSize: 10,
      counts: 0,
      tableData: [],
      workTime: 0,
      dialogVisible: false,
      type: '',

      // 弹框
      weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      form: {
        id: 0,
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        friday: '0',
        saturday: '0',
        sunday: '0',
        workPatternType: '1', // 工作模式
        name: '',
        userType: '0', // 用户类型
        operator: 0, // 操作人
        restDayNum: 0, // 休息天数
        workDayNum: 0, // 连续工作天数
        workStartMinute1: new Date(2016, 9, 10, 9, 0).getTime(), // 工作开始时间-分钟数
        workEndMinute1: new Date(2016, 9, 10, 18, 0).getTime(), // 工作结束时间-分钟数
        // region: '',
        // date1: '',
        // date2: '',
        // delivery: false,
        week: [],
        dateRange: [new Date(2016, 9, 10, 9, 0), new Date(2016, 9, 10, 18, 0)]
        // resource: '',
        // desc: ''
      }
    }
  },
  computed: {
    dateRange: {
      get () {
        return [this.form.workStartMinute1, this.form.workEndMinute1]
      },
      set (val) {

      }
    }
  },
  created() {
    this.workPatternsPage()
  },
  methods: {

    /**
		 * 渲染请求
		 */
    async workPatternsPage() {
      const { data } = await workPatternsPageApi(
        {
          page: this.page,
          pageSize: this.pageSize
        }
      )
      // console.log(data.items)
      this.tableData = data.items
      this.counts = +data.counts
      this.pages = +data.pages
    },
    // workPatternsPageApi
    /**
		 * 添加工作模式
		 */
    addDialog() {
      this.type = 'add'
      this.dialogVisible = true
    },
    /**
		 * 编辑功能
		 */
    handleClick(row) {
      console.log(row)
      console.log(this.form)
      this.type = 'edit'
      this.form.workPatternType = String(row.workPatternType)
      this.form.monday = String(row.monday)
      this.form.tuesday = String(row.tuesday)
      this.form.wednesday = String(row.wednesday)
      this.form.thursday = String(row.thursday)
      this.form.friday = String(row.friday)
      this.form.saturday = String(row.saturday)
      this.form.sunday = String(row.sunday)
      this.form.name = row.name
      this.form.userType = row.userType
      this.form.restDayNum = row.restDayNum
      this.form.workDayNum = row.workDayNum
      this.form.workStartMinute1 = row.workStartMinute1
      this.form.workEndMinute1 = row.workEndMinute1
      this.form.id = row.id

      this.dialogVisible = true
    },
    /**
		 * dialog-tab栏
		 */
    handleClickTab(tab, event) {
      console.log(tab, event)
    },
    /**
		 * 改变工作时间
		 */
    handleDate() {},
    /**
		 * 点击确认
		 */
    async onSubmit() {
      if (this.type === 'add') {
        const form = this.dealWithParams(this.form)
        // console.log(form)
        await workPatternsaddApi(form)
        // console.log(res)
      } else {
        await workPatternseditApi(this.form)
      }
      this.workPatternsPage()
      this.handleClose()
    },
    /**
		 * 弹框关闭
		 */
    handleClose() {
      this.dialogVisible = false
      // 处理关闭一瞬间表单重置问题
      setTimeout(() => {
        this.workPatternType = '1'
        this.$nextTick(() => {
          this.$refs.form.resetFields()
        })
        this.form.dateRange = [new Date(2016, 9, 10, 9, 0), new Date(2016, 9, 10, 18, 0)]
      }, 200)
    },

    /**
		 * 删除功能
		 */
    async del(row) {
      // console.log(row.id)
      this.$confirm('确定要删除?', '温馨提示').then(async() => {
        await workPatternsdelApi({ id: row.id })
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        this.$message.success('删除成功')
        this.workPatternsPage()
      }).catch(() => {
        // console.log('取消')
      })
    },

    /**
		 *分页功能1
		 */
    handleSizeChange(val) {
      this.pageSize = val
      this.workPatternsPage()
    },
    /**
		 *分页功能2
		 */
    handleCurrentChange(val) {
      this.page = val
      this.workPatternsPage()
    },
    /**
		 *分页功能3
		 */
    prevNextClick(i) {
      this.page += i
      this.workPatternsPage()
    },
    /**
		 * form收集数据处理
		 */
    dealWithParams() {
      return {
        name: this.form.name,
        operator: this.form.operator,
        restDayNum: this.form.restDayNum,
        workDayNum: this.form.workDayNum,
        userType: this.form.userType,
        workEndMinute1:
					// 此处需要将时间转为距离当天0点0分的分钟数的差值
					(this.form.workEndMinute1 -
						new Date(2016, 9, 10, 0, 0).getTime()) /
					1000 /
					60,
        workStartMinute1:
					(this.form.workStartMinute1 -
						new Date(2016, 9, 10, 0, 0).getTime()) /
					1000 /
					60,
        workPatternType: this.form.workPatternType,
        monday:
					this.form.week.findIndex((item) => item === '周一') === -1 ? 2 : 1,
        tuesday:
					this.form.week.findIndex((item) => item === '周二') === -1 ? 2 : 1,
        wednesday:
					this.form.week.findIndex((item) => item === '周三') === -1 ? 2 : 1,
        thursday:
					this.form.week.findIndex((item) => item === '周四') === -1 ? 2 : 1,
        friday:
					this.form.week.findIndex((item) => item === '周五') === -1 ? 2 : 1,
        saturday:
					this.form.week.findIndex((item) => item === '周六') === -1 ? 2 : 1,
        sunday:
					this.form.week.findIndex((item) => item === '周日') === -1 ? 2 : 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-list-box{

	margin: 20px;
	padding: 30px;
	background-color: #fff;
	.add{
		background-color: #e15536;
		border:none;
	}
	.add:hover, .add:focus{
		background-color: #ffab98;
	}
	/deep/ .el-table .cell {
		text-align: center;
	}
	.shu{
		text-align: center;
		color:#ccc;
		font-size: 16px;
		line-height: 16px;
	}
	/deep/ .el-pagination .el-select .el-input .el-input__inner:hover{
		border:1px #e15536 solid;
	}
	/deep/ .el-pager li.active{
		color: #e15536;
	}
	/deep/ .el-tabs__active-bar{
		background-color: #e15536 ;
	}
	/deep/ .el-tabs__item.is-active{
		color: #20232a;
		font-weight: 700;
	}
	/deep/ .el-tabs__item:hover{
		color: #20232a;
		font-weight: 700;
	}
	/deep/ .el-checkbox{
		margin-right: 15px;
	}
	.tips{
		color: #bac0cd;
		margin-top: -15px;
		margin-bottom: -10px;
	}
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
/deep/ .pagination{
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  /deep/ .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  /deep/ .el-form-item__content {
    height: 40px;
  }
  /deep/ .el-tabs__item {
    font-size: 14px;
  }
  /deep/ .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e15536;
  }
  /deep/ .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  /deep/ .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
/deep/ .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
/deep/ .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
</style>
